import React from 'react'
import './App.css';
import { Layout } from 'antd';
import { Menu } from 'tdesign-react';
import { Outlet, useNavigate } from 'react-router-dom';
export default function App() {
  let navigate = useNavigate();
  const { Sider, Content } = Layout;
  const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    color: 'black',
    backgroundColor: '#fff',
  };
  const siderStyle = {
    textAlign: 'center',
    lineHeight: '80px',
    height:'100vh',
    color: '#fff',
    backgroundColor: '#ccc',
  };
  
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '1500px',
    maxWidth: '100%',
  }

  const { MenuItem } = Menu;

  let goList = () => {
    navigate('/list')
  }
  return (
    <div>
      <div className='app'>
        <div className='layout'>
          <Layout style={layoutStyle}>

            <Sider width="25%" style={siderStyle}>
              <div className='sider'>
                <Menu
                  value={0}
                  style={{ marginRight: 20 }}
                >
                  <MenuItem value={0}>
                    <span onClick={goList}>基础档案</span>
                  </MenuItem>
                  <MenuItem>
                    <span>采购管理</span>
                  </MenuItem>
                  <MenuItem>
                    <span>销售管理</span>
                  </MenuItem>
                  <MenuItem>
                    <span>库存管理</span>
                  </MenuItem>
                  <MenuItem>
                    <span>报表查询</span>
                  </MenuItem>
                  <MenuItem>
                    <span>系统管理</span>
                  </MenuItem>
                </Menu>
              </div>
            </Sider>
            <Layout>
              
              <Content style={contentStyle}>
                <Outlet />
              </Content>
              
            </Layout>
          </Layout>
        </div>

      </div>
    </div>
  )
}



